<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>Title</title>
    <!-- 定制版 ionic 样式 -->
    <!--<link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.css">-->
    <link rel="stylesheet" href="vendor/vonic.min.css">


</head>
<body>
<von-app></von-app>


<!-- 依赖库 axios/vue/vue-router -->
<!--<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>-->
<script src="vendor/axios.min.js"></script>
<!--<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>-->
<script src="vendor/vue.min.js"></script>
<!--<script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>-->
<script src="vendor/vue-router.min.js"></script>

<!-- vonic 核心文件 -->
<!--<script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script>-->
<script src="vendor/vonic.min.js"></script>


<script>
    // Page Components
    var Index = {
        template: `
<div class="page has-navbar" v-nav="{title: '对话框', showBackButton: true}">
    <div class="page-content padding-top">

      <item class="item-icon-right" @click.native="showAlert()">
        Alert <span class="item-note">提示框</span>
        <i class="icon ion-ios-arrow-right"></i>
      </item>
      <item class="item-icon-right" @click.native="showConfirm()">
        Confirm <span class="item-note">确认框</span>
        <i class="icon ion-ios-arrow-right"></i>
      </item>
      <item class="item-icon-right" @click.native="showAlertIOS()">
        iOS Alert <span class="item-note">iOS 风格提示框</span>
        <i class="icon ion-ios-arrow-right"></i>
      </item>
      <item class="item-icon-right" @click.native="showConfirmIOS()">
        iOS Confirm <span class="item-note">iOS 风格确认框</span>
        <i class="icon ion-ios-arrow-right"></i>
      </item>
      <item class="item-icon-right" @click.native="multiMode()">
        Multi Mode <span class="item-note">多个同时出现</span>
        <i class="icon ion-ios-arrow-right"></i>
      </item>

      <item class="item-icon-right" @click.native="showAlert('scale')">
        Scale Effect
        <i class="icon ion-ios-arrow-right"></i>
      </item>
      <item class="item-icon-right" @click.native="showAlert('slide')">
        Slide Effect
        <i class="icon ion-ios-arrow-right"></i>
      </item>

      <div style="height: 50px;"></div>

    </div>
  </div>
            `,
      methods: {
        showAlert(effect) {
          $dialog.alert({
            content: 'Hello!',
            okTheme: 'positive',
            effect: effect || 'default'
          }).then(() => {
            console.log('alert hide.')
          })
          // setTimeout($dialog.hide, 2000)
        },
        showConfirm() {
          $dialog.confirm({
            content: '在"微信"中打开链接吗?',
            okText: '打开'
          }).then((res) => {
            console.log('confirm result: ', res)
          })
        },
        showAlertIOS() {
          $dialog.alert({
            theme: 'ios',
            title: '无法打开网页',
            content: 'Safari打不开网页，因为网址无效。',
            okText: '好'
          }).then(() => {
            console.log('alert hide.')
          })
        },
        showConfirmIOS() {
          $dialog.confirm({
            theme: 'ios',
            title: '在"微信"中打开链接吗?',
            cancelText: '取消',
            okText: '打开'
          }).then((res) => {
            console.log('confirm result: ', res)
          })
        },
        multiMode() {
          let options = {
            theme: 'ios',
            title: '测试',
            okText: '好'
          }
          for (let i = 0; i < 3; i++) {
            setTimeout(() => {
              options.content = `第${i+1}条消息`
              $dialog.alert(options)
            }, 500 * i)
          }
        }
      }
    }

    // Routes
    var routes = [
        { path: '/', component: Index }
    ]

    // Start up
    Vue.use(Vonic.app, {
        routes: routes
    })
</script>

</body>
</html>
